<template>
  <div class="btn-wrap">
    <px-tooltip v-if="exportImage" effect="dark" content="导出图片">
      <px-button type="primary" text :icon="Download" @click="handlerExportImage" />
    </px-tooltip>
    <px-tooltip v-if="exportData" effect="dark" content="导出数据">
      <px-button type="primary" text :icon="Document" @click="handlerExportData" />
    </px-tooltip>
  </div>
</template>

<script setup>
import { Download, Document } from "@px-ui/icons-vue";

defineOptions({
  name: "BTN_IMPAGE_AND_DATA"
});

const emits = defineEmits(["exportChange"]);

const props = defineProps({
  exportImage: {
    type: Boolean,
    default: true
  },
  exportData: {
    type: Boolean,
    default: true
  }
});

const handlerExportImage = () => {
  emits("exportChange", "image");
};

const handlerExportData = () => {
  emits("exportChange", "data");
};
</script>

<style lang="scss" scoped>
.btn-wrap {
  display: flex;
  gap: 16px;
  align-items: center;

  .px-button {
    padding: 0;

    & + .px-button {
      margin-left: 0;
    }
  }
}
</style>
